<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>代收货款业务管理</title>
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <!--<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">-->
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>应用管理</cite></a>
        <a><cite>业务管理</cite></a>
        <a><cite>代收货款业务管理</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">代收货款业务管理</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="collectionTable" lay-filter="collectionTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container layui-inline">
        <button id="btnAdd" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe654;</i>新增
        </button>
    </div>
</script>

<!-- 行内工具栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="statusTemp">
    <input type="checkbox" name="status" lay-skin="switch" value="{{d.cbpid}}" lay-text="启用|停用" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script src="../../../layui/layui.js"></script>
<!--<script src="../../../layuiadmin/layui/layui.js"></script>-->
<script>

    // 要使用的layui模块
    layui.use(['layer', 'form', 'table', 'laydate', 'element'], function () {
        var layer = layui.layer; // 获得layer模块
        var form = layui.form; // 获得form模块
        var table = layui.table; // 获得table模块
        var element = layui.element; // 获得element模块（和导航、tab等有关）
        var $ = layui.$; // 调用JQuery方法时
        var laytpl = layui.laytpl;


        //第一个实例
        var tableIns = table.render({
            elem: '#collectionTable' // 给table设置id或class，方便layui调用该元素
            , height: 'full-120' // 窗口高度-100
            , url: "/application/business/collection/cbpnglist"// 数据接口
            // ,method: 'post' //如果无需自定义HTTP类型，可不加该参数
            , page: false // 关闭分页
            , limit: Number.MAX_VALUE //展示所有
            // , limits: [10, 20, 30, 50, 100] //自定义可选分页大小
            , cellMinWidth: 90 // 全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , skin: 'line' // 行边框风格
            // ,even: true // 开启隔行背景
            // ,size: 'sm' // 小尺寸的表格
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            , defaultToolbar: [
                // 列过滤、导出按钮、打印按钮
                ,'filter', 'exports', 'print',
            ]
            , title: '代收货款业务'// 表名
            // 列信息
            , cols: [[ //表头
                {field: 'cbpid', title: 'ID', hide: true}
                , {field: 'type', title: '业务名称', width: 110, align: 'center', fixed: 'left'}
                , {field: 'maximumPayment', title: '最高代收货款(元)', minWidth: 150, align: 'center'}
                , {field: 'commisionRateRuling', title: '手续费(%)', minWidth: 100, align: 'center', templet: function(d){
                    return (d.commisionRateRuling) * 100;
                    }
                }
                , {field: 'minCommisionReceivable', title: '最低手续费用(元)', minWidth: 150, align: 'center'}
                , {field: 'maxCommisionReceivable', title: '最高手续费用(元)', minWidth: 150, align: 'center'}
                , {field: 'deadline', title: '返款时间(小时)', minWidth: 130, align: 'center'}
                , {field: 'describe', title: '说明', minWidth: 200, align: 'center'}
                , {field: 'status', title: '状态', minWidth: 110, align:'center', templet:'#statusTemp'}
                , {title: '操作', toolbar: '#barDemo', minWidth: 100, align: 'center', fixed: 'right'}
            ]]
        });

        // !!! 注意：新增按钮在script里，必须使用以下格式才能不出点击重置后无效的bug
        // 新增
        $('body').on('click', '#btnAdd', function () {
            // 打开弹窗
            layer.open({
                // title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；
                // 若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，
                // 数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
                // 类型：String/Array/Boolean，默认：'信息'
                title: '新增业务信息'

                // moveOut: true,
                , area: ['60%', '75%']
                //类型：String/DOM/Array，默认：''

                // layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                // 详见官方文档中的弹出层
                , type: 2

                // content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，
                // 更可以随着type的不同而不同，当type为1时，可以指定隐藏的元素，或直接写html代码
                , content: 'collection_business_add.html'

                // 是否能够最大化最小化
                , maxmin: true

                // 0-6的动画形式，-1不开启
                //,anim: 2

                //皮肤风格
                , skin: 'layui-layer-lan'

                // 当你需要在层创建完毕时即执行一些语句，可以通过该回调。
                // success会携带两个参数，分别是当前层DOM当前层索引。
                // index是指当前选择的是表格中的第几行
                // ayero = layer object = layer 的对象 = 弹出层的对象
            });
        });

        form.on('switch(status)', function(data){
            // 得到开关的value值，实际是需要修改的ID值。
            var cbpid = this.value;
            var status = this.checked ? '1' : '0';
            var index;
            $.ajax({
                type: 'POST'
                ,url: '/application/business/collection/changeStatus'
                ,data: {"cbpid" :cbpid,"status":status}
                ,dataType:'JSON'
                ,beforeSend:function(){
                index = layer.msg('正在切换中，请稍候',{icon: 16,time:false,shade:0.8});
            },
            error: function(data){
                console.log(data);
                layer.msg('数据异常，操作失败！');
                layui.table.reload('collectionTable');
            },
            success: function(data){
                if(data.code=="0"){
                    setTimeout(function(){
                        layer.close(index);
                        layer.msg(data.msg);
                        layui.table.reload('collectionTable');
                        },1000);
                }else{
                    console.log(data);
                    layer.msg(data.msg);
                    layui.table.reload('collectionTable');
                }}
        });
        });


        //头工具栏事件
        table.on('toolbar(collectionTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }
            ;
        });

        //监听工具条
        table.on('tool(collectionTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除么', function (index) {
                    // obj.del();
                    $.post('/application/business/collection/delete/' + data.cbpid, function (data) {
                        tableIns.reload();
                        layer.msg(data.msg);
                        layer.close(index);
                    });
                });
            } else if (obj.event === 'edit') {
                // 这行是监听到的表格行数据信息，复制给json全局变量。
                // jsonString = JSON.stringify(data);
                // 打开弹窗
                layer.open({
                    // title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；
                    // 若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，
                    // 数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
                    // 类型：String/Array/Boolean，默认：'信息'
                    title: '修改业务信息'

                    // moveOut: true,
                    , area: ['60%', '75%']
                    //类型：String/DOM/Array，默认：''

                    // layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    // 详见官方文档中的弹出层
                    , type: 2

                    // content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，
                    // 更可以随着type的不同而不同，当type为1时，可以指定隐藏的元素，或直接写html代码
                    , content: 'collection_business_edit.html'

                    // 是否能够最大化最小化
                    , maxmin: true

                    // 0-6的动画形式，-1不开启
                    //,anim: 2

                    //皮肤风格
                    , skin: 'layui-layer-lan'

                    // 当你需要在层创建完毕时即执行一些语句，可以通过该回调。
                    // success会携带两个参数，分别是当前层DOM当前层索引。
                    // index是指当前选择的是表格中的第几行
                    // ayero = layer object = layer 的对象 = 弹出层的对象
                    , success: function (layero, index) {
                        var body = layer.getChildFrame('body', index); //得到产品查询层的BODY
                        body.find('#hidValue').val(JSON.stringify(data)); //将本层的窗口索引传给产品查询层的hidValue中
                        // body.find('#employeeName').val(data.employeeName);
                        // body.find('#department').val(data.department);
                    }
                });
            }
        });
    });

</script>
</body>
</html>